<template>
  <!-- eslint-disable -->
  <div id="main-content" class="main">
    <Scroll ref="scroll" :scroll-more="true" @infiniteScroll="getMallResell($event)">
      <div class="banner" @click="goRuls">
        <img src="../../assets/img/banner.png" alt="" />
      </div>
      <div class="pic-list">
        <div class="pic-item" v-for="(item, index) in dataList" @click="goNextPage(item.id)" :key="index">
            <div class="pic">
              <img style="width: 100%;" :src="item.thumbnail | ImgFilter" alt="">
            </div>
            <div class="info">
              <div class="title">{{item.name}}</div>
              <span class="money">抢购价:￥{{item.orderMoneyMin | pointFilter}}</span>
            </div>
        </div>
      </div>
    </Scroll>
    <vFooter ref="vFooter" />
  </div>
</template>

<script>
import Ajax from "@/mixins/ajax";
import { Scroll } from "~/vScroll";
import vFooter from "~/footer/index.vue";

const getMallResellUrl = "/card-service-web/onePercent/queryMall";

export default {
  name: "Home",
  mixins: [Ajax],
  components: {
    Scroll,
    vFooter
  },
  data() {
    return {
      // 是否需要在list尾部加空内容
      notList: false,
      dataList: [],
      busy: false,
      // 规则协议提示框状态
      isPopup_info: false,
      emptyList: false,
      // 滚动条位置
      ScrollTop: 5000
    };
  },
  // 页面离开
  beforeRouteLeave(to, from, next) {
    /* eslint-disable */
    if (to.name === "GoodsDetails") {
      to.meta.keepAlive = false;
    }
    next();
  },
  // 页面进入
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 更新IScroll尺寸
      vm.$nextTick(() => {
        vm.$refs.scroll.refresh();
      });
    });
  },
  watch: {
    /**
     * 处理list长度不能被2整除之后影响布局
     */
    dataList(nextValue) {
      if (nextValue.length % 2 !== 0) {
        this.notList = true;
      } else {
        this.notList = false;
      }
    }
  },
  mounted() {
    /* eslint-disable */
    this.$nextTick(() => {
      const footerEl = this.$refs.vFooter.$el;
      const windowHeight = this.getHeight();
      const headerEl = document.querySelector("#header");
      const headerElHeight = this.getElHeight(headerEl);
      const footerElHeight = this.getElHeight(footerEl);
      this.mainHeight = windowHeight - (headerElHeight + footerElHeight);
    });
    this.getMallResell();
    // 关闭错误提示框
    const closePopup = {
      isPrompt: false
    };
    this.$emit("onPrompt", closePopup);
  },
  methods: {
    /**
     * 关闭所有弹框
     */
    closePopAll() {
      this.isPopup_info = false;
    },
    /**
     * 获取转卖商品列表
     */
    getMallResell(reload) {
      if (reload) {
        this.currentPageNo = 0;
      }
      /* eslint-disable */
      this.post(getMallResellUrl, {
        pageNo: ++this.currentPageNo,
        pageSize: 20
      }).then(body => {
        if (body.execData && body.execData.whetherFirstLogin == "0") {
          this.isPopup_info = true;
        }
        if (reload) {
          this.dataList = body.execDatas;
        } else if (body.execDatas.length === 0) {
          this.$refs.scroll.setEndMoreText("我已经没有更多了");
          --this.currentPageNo;
        } else {
          this.dataList = this.dataList.concat(body.execDatas);
        }
        if (this.dataList.length === 0) {
          this.emptyList = true;
        }
        // 更新IScroll尺寸
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    },
    //跳转详情页
    goNextPage(id) {
      this.$router.push({ path: `/goods/details/${id}` });
    },
    goRuls() {
      this.$router.push({ path: "/service/greement" });
    }
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.noList {
  width: 100%;
  height: 70%;
  position: absolute;
  top: 1.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding-top: 3rem;
  align-items: center;
  background: #f5f5f4;
}
.noList-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.noList p {
  padding: 0.08rem 0;
  color: #888888;
}
.pic-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: auto;
  padding: 0 0.4rem;
  /*background: #fff;*/
  margin-top: -1rem;
}
.notList:after {
  content: "";
  flex: auto;
}
.pic-list .pic-item {
  width: 4rem;
  margin-top: 0.6rem;
}
.pic-list .pic-item:last-child {
  margin-bottom: 0.6rem;
}
.pic-item .info {
  padding: 0 0.1rem;
}
.pic-item .info .title {
  margin: 0.27rem 0 0.28rem;
  font-size: 0.39rem;
  line-height: 0.45rem;
  height: 0.9rem;
  color: #000000;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pic-item .info .money {
  font-size: 0.42rem;
  line-height: 0.31rem;
  color: #d11463;
}
.pic-item .info .time {
  float: right;
  margin-top: 0.03rem;
  font-size: 0.3rem;
  line-height: 0.31rem;
  color: #8e8e8e;
  overflow: hidden;
}
.pic-list .pic-item .pic {
  width: 100%;
  height: 4.2rem;
  line-height: 4.2rem;
  text-align: center;
  overflow: hidden;
  /*background: #E6E6E6;*/
}
.footer {
  height: 3.49rem;
  background: #f5f5f4;
  margin-top: 0.45rem;
  padding-top: 1.21rem;
  text-align: center;
  color: #888888;
}
.footer .link span {
  color: #888888;
}
.footer .link a {
  text-decoration: none;
  color: #888888;
  padding: 0 0.45rem;
}
.footer .name {
  margin: 0.46rem 0 0.17rem;
}
.btn-home {
  display: block;
  /* height: 1rem; */
  /* line-height: 1rem; */
  font-size: 0.42rem;
  padding: 0.2rem 0.5rem;
  margin-top: 0.6rem;
  background: #fff;
  border: 1px solid#d11463;
  border-radius: 0.1rem;
  text-decoration: none;
  color: #d11463;
  line-height: 0.5rem;
}

.cancel-info {
  margin-top: 0.62rem;
  font-size: 0.42rem;
  text-align: left;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
.banner {
  width: 100%;
  height: 6.37rem;
}
.banner img {
  width: 100%;
  height: 100%;
}
.pic-list .pic-item .pic img {
  width: 100%;
  height: 100%;
}
.title {
  height: 1rem;
}
</style>

